import React, { Component, PureComponent } from 'react'
import _ from 'lodash'
import { fromJS, is } from 'immutable'

// PureComponent 它只能对于普通数据类型有优化的作用，如果是引用类型则无用
// class Child extends PureComponent {
class Child extends Component {
  // 优化重复渲染所用的生命周期方法,此方法必须要有返回值,true/false
  // true则继续向下渲染,false则停止向下渲染
  // nextProps / nextState 最新的值
  // this.props / this.state 旧值
  // shouldComponentUpdate(nextProps, nextState) {
  //   // 如果你props对象中的属性过多,一个个去判断,相当累人,所以用对象深比较完成
  //   if (this.props.num.value !== nextProps.num.value) {
  //     return true
  //   }
  //   return false
  // }

  // shouldComponentUpdate(nextProps, nextState) {
  //   // 深比较 -- 递归,性能相对于来说差一此,但是代码写起来简约
  //   // 返回是一个boolean类型,如果对象值相同,则返回true,反之为false
  //   return !_.isEqual(this.props, nextProps)
  // }

  // 如果有这样的优化需求,建议可以用一下immutable来完成,性能比lodash更高一些
  shouldComponentUpdate(nextProps, nextState) {
    let newProps = fromJS(nextProps)
    let oldProps = fromJS(this.props)
    return !is(oldProps, newProps)
  }

  render() {
    console.log('child -- render')
    return (
      <div>
        <h3>{this.props.num.value}</h3>
      </div>
    )
  }
}

export default Child
